<template >
  <div style="flex-direction: column; background-color: #f5f5f5;">
    <div class="searchBody">
      <a-input-search
        v-model:value="searchBar"
        placeholder="input search text"
        enter-button
        class="searchBar"
      />
    </div>
    <div class="tagBar">
      <div style="margin-bottom: 15px;" ref="scrollContainer">
        <a-tag @click="selectTagall('All')"
          class="category-tag">
          All
        </a-tag>
        <a-tag
          v-for="tag in tagList"
          :key="tag.id"
          :color="tag.name === activeTag ? 'blue' : ''"
          @click="selectTag(tag)"
          class="category-tag"
        >
          {{ tag.name }}
        </a-tag>
      </div>
      <div class="content-list">
        <a-card
          v-for="item in filteredArticles"
          :key="item.id"
          hoverable
          class="article-card"
          @click="goToArticlePage(item)"
        >
          <template #title>
            <div class="card-header">
              <h3>{{ item.title }}</h3>
              <span style="color: rgb(135, 206, 235); font-size: large;margin-right: 50px;">{{ item.authorName }}</span>
              <a-tag v-for="tag in (item.tags)" :key="tag.id" >{{ tag.name }}</a-tag>
            </div>
          </template>
          <div class="article-content">
            {{ stripMarkdown(item.content.slice(0, 100)) }}
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script  setup lang="ts">
  import type { articlesData, tagData } from '@/modules/manage';
  import { defineComponent } from 'vue';
  import { ref } from 'vue';
  import { onMounted } from 'vue';
  import { useAdministorStore } from '@/store/administor';
  import { useArticleStore } from '@/store/articleDetail';
  import { computed } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const searchBar = ref<string>('');
  const tagList = ref<tagData[]>([])
  const activeTag = ref('All')
  const administorStore= useAdministorStore()
  const articleDetail =useArticleStore()
  const articles = ref<articlesData[]>([]);
  
  const fetchTags = async () => {
    const response = await administorStore.getTagList()
    tagList.value=response.data.data
  }

  const selectTag =async (tag:any) => {
    const response = await articleDetail.getArticlesByTag( tag.id);
    articles.value = response;
    console.log("aaa",articles.value);
    
  }

  const selectTagall =async (tagValue: string) => {
    const response = await administorStore.getAllArticle();
    activeTag.value = tagValue
    articles.value = response;
  }

  

  async function getArticle() {
    const response = await administorStore.getAllArticle();
    articles.value = response;
  }

  onMounted(() => {
    fetchTags()
    getArticle();
  });

  const stripMarkdown = (text:string) => {
  return text.replace(/[#*`~]/g, '');
};

  const filteredArticles = computed(() => {
    return articles.value.filter(item => {
      const matchesTag = activeTag.value === 'All' || 
                        (item.tags && item.tags.includes(activeTag.value));
      const matchesSearch = item.title.toLowerCase().includes(searchBar.value.toLowerCase());
      return matchesTag && matchesSearch;
    });
  });
  const goToArticlePage = (item:any) => {
    articleDetail.articleContent= item.content
    router.push(`/article/${item.id}`);
  };
</script>
<style lang="css" scoped>
  .searchBody{
    display: flex;
    flex-direction: row;
    height: 20%;
    background-image: url('https://upload-bbs.miyoushe.com/upload/2025/01/21/160087329/a69165f4d5d9940cf0f91fdcbc53779c_3999659693792134162.png?x-oss-process=image//resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png');
    background-size: cover;
    background-position: center -160px;
    align-items: center;
    justify-content: center;
    padding: 25px;
    width: 100%;
  }
  .searchBar{
    width: 29%;
    height: 50%;
    border-radius: 0;
  }
  .homeBody{
    display: flex;
    flex-direction: row;
    height: 80%
  }

  .tagBar {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    justify-content: center;
  }

  .article-card {
  margin-bottom: 20px;
  width: 900px;
}

.card-header {
  width: 50px;
}

.article-content {
  margin: 10px 0;
  color: #666;
  line-height: 1.6;
}

.article-meta {
  margin-top: 15px;
  font-size: 12px;
}

</style>